<template>
  <div>
    <router-link to="/addOrUpdate">添加角色</router-link>
    <el-table :data="roleData" border style="width: 100%">
      <el-table-column fixed prop="roleName" label="角色名"> </el-table-column>

      <el-table-column prop="roleDesc" label="描述"> </el-table-column>

      <el-table-column prop="roleStatus" label="状态" :formatter="statusForm"> </el-table-column>

      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="deleteRole(scope.row)" type="text" size="small"
            >删除</el-button
          >

          <el-button type="text" size="small" @click="updateRole(scope.row.id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @next-click="queryNextPage"
      @prev-click="queryPrevPage"
      @size-change="sizeChangeFun"
      @current-change="currentChangeFun"
      :page-size="pageSize"
      background
      layout="prev, pager, next,sizes,jumper,total"
      :total="total"
      :page-sizes="pageSizes"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  methods: {
    updateRole(id) {
      this.$router.push("/updateRole/" + id);
    },
statusForm(row, column, cellValue, index){
  return cellValue==1?"启用":"禁用";

},


    deleteRole(row) {
      var app = this;
    },
    deleteRole(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var app = this;
          this.$httpRequest.get("role/delete/" + row.id).then(function () {
            app.$message({
              message: "删除成功",
              type: "success",
              duration: 1000,
              //跳转到显示列表
              onClose: () => {
                //删除本身就在userList页面完成的基础上再查询一遍
                app.getRolePage();
              },
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    currentChangeFun(newcurrent) {
      //输入当前页时触发
      this.current = newcurrent;
      this.getRolePage();
    },

    sizeChangeFun(newPageSize) {
      //显示数据条数改变触发

      this.pageSize = newPageSize;
      this.getRolePage();
    },

    queryPrevPage(newcurrent) {
      //点击上一页触发

      this.current = newcurrent;
      this.getRolePage();
    },
    queryNextPage(newcurrent) {
      //点击下一页触发

      this.current = newcurrent;
      this.getRolePage();
    },

    getRolePage() {
      var app = this;

      this.$httpRequest
        .post("role/page", {
          current: app.current,
          size: app.pageSize,
        })
        .then(function ({ data }) {
          app.roleData = data.data.records;
          app.current = data.data.current;
          app.pageSize = data.data.size;
          app.total = data.data.total;
        })
        .catch(function (error) {
          console.log("失败", error);
        })
        .then(function () {
          console.log("失败和成功都会过来");
        });
    },
  },
  data() {
    return {
      current: 1,
      pageSize: 5,
      total: 100,
      pageSizes: [5, 10, 15, 20],
      roleData: [],
    };
  },
  mounted: function () {
    this.getRolePage();
  },
};
</script>

<style>
</style>